<template>
    <fieldset>
        <legend>tap切换</legend>
        <button v-for='btn in buttons' :key='btn' :class="['tab-button',{active:selectBtn===btn}]" @click='handleClick(btn)'>{{btn}}</button>
        <div class='tab' :is='dynamit'>
        切换到的内容展示
        </div>
    </fieldset>
</template>

<script>
    import email from './email.vue'
    import home from './home.vue'
    import mine from './mine.vue'
    export default{
        data(){
            return{
                buttons:['email','home','mine'],
                selectBtn : 'email'
            }
        },
        computed:{
            dynamit(){
                return this.selectBtn + '-com'
            }
        },
        components:{
            "email-com":email,
            "home-com":home,
            "mine-com":mine
        },
        methods:{
                handleClick(btn){
                this.selectBtn = btn
            }
        }
    }
</script>

<style>
    .tab-button {
        padding: 6px 10px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border: 1px solid #ccc;
        cursor: pointer;
        background: #f0f0f0;
        margin-bottom: -1px;
        margin-right: -1px;
    }
    .tab-button:hover {
        background: #e0e0e0;
    }
    .tab-button.active {
        background: hotpink;
    }
    .tab {
        border: 1px solid #ccc;
        padding: 10px;
    }
    h1 {
        margin:0;
    }
</style>
